<template>
  <div>
    <img class="image" src="../img/01pindan.png" alt="" />
    <ul>
      <li v-for="item in oneList2" :key="item.name">
        <router-link :to="'/topic'+item.productId">
            <div class='imageSmall'>
            <img
              class="imageSmall"
              :src="$store.state.imgsrc + item.productsImg"
              alt=""
            />
            </div>
            <div class="right">
              <h2>{{ item.productName }}</h2>
              <p>
                <span class="span1">2人团</span>
                <span class="span2"
                  >¥{{ (item.productPrice * 0.7).toFixed(1) }}</span
                >
                <span class="span3">¥{{ item.productPrice }}</span>
              </p>
              <div class="button">立即拼团</div>
            </div>
        </router-link>
      </li>
    </ul>
    <div class="foot"></div>
  </div>
</template>

<script>
import { homeOne } from "@/api";
export default {
  data() {
    return {
      oneList: [
        {
          img: "../img/u1.png",
          name: "商品111111111111111",
          price: "1.0",
          lastPrice: "268.0",
        },
        {
          img: "../img/u1.png",
          name: "【百草味】百花果冻干1 250g",
          price: "1.0",
          lastPrice: "268.0",
        },
        {
          img: "../img/u1.png",
          name: "【百草味】百花果冻干2 250g",
          price: "1.0",
          lastPrice: "268.0",
        },
        {
          img: "../img/u1.png",
          name: "【百草味】百花果冻干3 250g",
          price: "1.0",
          lastPrice: "268.0",
        },
      ],
      oneList2: [],
    };
  },
  methods: {
    getHomeOne() {
      homeOne({
        discounts: 5,
      }).then((res) => {
        // console.log(res,'homeone')
        this.oneList2 = res.data.data;
      });
    },
  },
  mounted() {
    this.getHomeOne();
  },
};
</script>

<style scoped>
.imageSmall {
  width: 35vw;
  height: 18vh;
}
.image {
  margin-top: 3vh;
  width: 100vw;
}
li {
  margin-top: 1vh;
  margin-bottom: 2vh;
  display: flex;
}
li a{
  display: flex;
}
h2 {
  color: #333333;
  font-size: 16px;
  font-weight: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.right {
  margin-left: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
p {
  margin-top: 2vh;
  display: flex;
  align-items: center;
}
.span1 {
  color: white;
  padding-left: 15px;
  padding-right: 15px;
  background: #409eff;
  border-radius: 10px;
}
.span2 {
  margin-left: 5vw;
  margin-right: 3vw;
  color: #ff380d;
  font-size: 18px;
}
.span3 {
  margin-top: 1vh;
  font-size: 12px;
  color: #999999;
  text-decoration: line-through;
}
.button {
  color: white;
  text-align: center;
  border-radius: 5px;
  background: #ff380d;
  width: 52vw;
  height: 4.5vh;
  line-height: 4.5vh;
}
.foot {
  margin-top: 2vh;
  width: 100vw;
  background: #eeeeee;
  height: 1vh;
}
</style>